<template>
    <div>
    <div  class="shadow-drop-2-center box">
        <div class="m-wudaohang-box" >
            <el-input 
            class="m-wudaohang-xbox" type="text" 
            placeholder="请输入内容"
            suffix-icon="el-icon-back"
            @keydown.enter.native="addTalkList()" v-model="newLists"
            />
            <ul class="infinite-list" 
            v-infinite-scroll="load" 
            style="overflow:auto"
            >
                <li  v-for="list in talkList" :key="list.id"  
                class="infinite-list-item m-wudaohang-xbox"
                >
                    {{list.date}}&nbsp; : &nbsp;
                    {{list.msg}}
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
    name:'Talks',
    methods: {
        ...mapActions('talkAbout',['addTalkList']),
        ...mapMutations('talkAbout',['SETNEWLIST'])
    },
    mounted() {
        this.$store.dispatch('talkAbout/talkList');
    },
    computed:{
        ...mapState('talkAbout',{
            talkList:(state)=>state.talkList
        }),
        ...mapGetters('talkAbout',['newList']),
        newLists:{
            get(){
                return this.newList
            },
            set(val){
                this.SETNEWLIST(val)
            }
        }

    }
}
</script>

<style scoped>
ul{
    height: 350px
}
</style>